{% block content %}
<html>
    <head>
        <script src="/static/jquery-1.9.0.js"></script>
        <script src="/static/lib.js"></script>
        <link rel="stylesheet" type="text/css" href="/static/style.css" />

        <script>
            var usedwords=[];
            var lasttile=-1;
            var tilereadonly=false;
            var idtilechanged=-1;
            var ismyturn={{ismyturn|lower}};
            console.log('#> in loading ismyturn='+ismyturn);
            (function(){
                    var url=window.location+'ismyturn/';
                    $.ajax({
                    'url' : url,
                    dataType: 'json',
                    success: function(json){
                        console.log(json['ismyturn']);
                        if(ismyturn!=json['ismyturn']) location.reload();
                        
                        if(!json['ismyturn']){
                            $("#btn_submit").attr('disabled','disabled');
                        }else
                            $("#btn_submit").removeAttr('disabled');                      
                    }});
                setTimeout(arguments.callee, 2000);
            })();
            
            $(function () {
                 {% for player in game.gameplayer_set.all %}
                    if({{player.winner|lower}}){
                        alert('{{player.user.username}} a gagné la partie');
                        $("#winner").text("{{player.user.username}} a gagné la partie (score: {{player.score}})");
                    }
                 {% endfor %}  
                var tile="{{ game.tile }}";
                console.log(tile.length);
                filltile(tile);
                $("#mot").val('');
                $("input.tile").bind('keyup blur',function(){ 
                    console.log("blur keyup");
                    $(this).val( $(this).val().toUpperCase().replace(/[^A-Z]/g,'.') ); 
                    if($(this).val()=='') $(this).val(".");
                });
                
                $("input.tile").change(function(){
                    console.log("change");
                    if($(this).val()!="."){
                        $("input.tile").attr('readonly','readonly');
                        tilereadonly=true;
                        idtilechanged=this.id;
                        console.log("###>"+idtilechanged);
                    }
                });
                
                $("input.tile").click(function () {
                    console.log("Click");
                    console.log(this.id+"-"+lasttile);
                    if((!$(this).hasClass('selected'))&&($(this).val()!=".")&&(isAround(this))){
                        $(this).addClass('selected');
                        var mot=$("#mot").val()+$(this).val();
                        $("#mot").val(mot);
                        lasttile=parseInt(this.id);
                    }
                    if(($(this).val()=='.')&&(!tilereadonly))
                        $(this).val("");
                });
                
                $("#btn_undo").click(function () {
                    $("#mot").val('');
                    location.reload();
                });
            });
        </script>
    </head>
    <body>
        <div style="width:100%;text-align:right;">WordsSnake [{{ game.name|escape }}] <a href="/accounts/logout">{{ user.username }} (Déconnexion)</a></div>
        
        
		<table border=0 width="100%" style="text-align:center;">
        
        <tr><td><img src="/static/logo.jpg" /></td><td>
            <h3>c'est le tour de {{ game.current_player.username }}         <input type="button" value="Finir" id="btn_finish" onClick="finish()"/><input type="button" value="passer la main" id="btn_skip" onClick="skip()"/></h3>
        <table cellspacing="0" cellpadding="0" align=center>
            <tr>
                <td><input type="text" maxlength="1" value="." id="0" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="1" class="tile"/></td>
                <td><input type="text" maxlength="1" value="A" id="2" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="3" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="4" class="tile"/></td>
            </tr>
            <tr>
                <td><input type="text" maxlength="1" value="." id="5" class="tile"/></td>
                <td><input type="text" maxlength="1" value="D" id="6" class="tile"/></td>
                <td><input type="text" maxlength="1" value="R" id="7" class="tile"/></td>
                <td><input type="text" maxlength="1" value="Y" id="8" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="9" class="tile"/></td>
            </tr>
            <tr>
                <td><input type="text" maxlength="1" value="." id="10" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="11" class="tile"/></td>
                <td><input type="text" maxlength="1" value="C" id="12" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="13" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="14" class="tile"/></td>
            </tr>
            <tr>
                <td><input type="text" maxlength="1" value="." id="15" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="16" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="17" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="18" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="19" class="tile"/></td>
            </tr>
            <tr>
                <td><input type="text" maxlength="1" value="." id="20" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="21" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="22" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="23" class="tile"/></td>
                <td><input type="text" maxlength="1" value="." id="24" class="tile"/></td>
            </tr>
        </table>
        <br/>
       <input type="text" id="mot" id="mot" readonly="readonly" style="text-transform:uppercase;"/> 
        <input type="button" value="Clear" id="btn_undo"/>
        <input type="button" value="Verifier le mot" id="btn_test" onClick="isWord()"/>
        <input type="button" value="Envoyer" id="btn_submit" onClick="isWord(submitTile)" />
        
        <br/>
        <div style="color:red;display:none;" id="invalidword">Ce mot n'existe pas dans le dictionnaire</div>
        <div style="color:green;display:none;" id="validword">Ce mot existe dans le dictionnaire</div>
        <div style="color:red;display:none;" id="usedword">Ce mot a été deja utilisé</div>        
        {% for player in game.gameplayer_set.all %}
         </td><td>
	    <h2>{{ player.user.username }}: score: {{ player.score }}</h2>
	    <table border=1  align=center>
	    <tr><td>Mots</td><td>Score</td></tr>
     	
	     	{% for word in player.get_words %}
            <script>usedwords.push('{{ word.word }}'); console.log(usedwords);</script>
	     	<tr><td>{{ word.word }}</td><td>{{ word.score }}</td></tr>
	     	{% endfor %}
     	</td></tr></table>
     	{% endfor %}
        </td>
        </tr>
        </table>
        <center><h1 style="color:green;" id="winner"></h1></center>
    </body>
</html>
{% endblock %}
